<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='../vue.js'></script>
  <script src="./data.js"></script>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div id='app'>

    <button @click="allChoose('10086')">全选</button>
    <button @click="allChoose('10010')">反选</button>
    <h1> 所有的总价：￥ {{ totalPrice }} 元 </h1>
    <!-- 2. 监听子组件触发父组件 -->
    <cell v-for="(item,index) in goods" ref="cell" @calc="calc" :key="index" :item="item"></cell>

  </div>
</body>

<template id="box">
  <div class="box">
    <img :src="choose" @click="swi = !swi" class="cho" alt="">
    <img :src="item.img" class="logo" alt="">
    <h3>{{item.title}}</h3>
    <h5>价格：￥{{item.price}} 元</h5>
    <section>
      <button @click="item.number <= 1 ? item.number = 1 : item.number--"> - </button>
      <input type="number" v-model.number="item.number">
      <button @click="item.number++"> + </button>
    </section>
    <h1> 组件总价： {{total}} </h1>
  </div>
</template>

<script>
  const app = Vue.createApp({
    data () {
      return {
        goods,
        totalPrice: 0 // 用来计算所有组件中的价格用的
      }
    },
    methods: {
      // 全选和反选按钮的点击事件
      // code = 10086(全选)  10010(反选)
      allChoose (code) {
        for (let i = 0; i < this.$refs.cell.length; i++) {
          if (code === '10086') {
            this.$refs.cell[i].swi = true
          } else {
            this.$refs.cell[i].swi = !this.$refs.cell[i].swi
          }
        }
      },
      // 1. 父组件先定义一个接收的方法
      calc () {
        // 计算所有被选中的总价格了

        // 先确保 this.$refs.cell 有内容
        if (!this.$refs.cell) {
          // 没有内容的时候直接不执行即可
          return
        }

        let num = 0
        for (let i = 0; i < this.$refs.cell.length; i++) {
          if (this.$refs.cell[i].swi) {
            // 被选中了，计算价格
            num += this.$refs.cell[i].totals
          }
        }

        // 将计算的 num 设置在所有的总价上
        this.totalPrice = num.toFixed(2)
      }
    },
  })

  app.component('cell', {
    template: '#box',
    props: {
      item: Object
    },
    data () {
      // data 为什么要是一个函数：原因是因为每个组件都要有自己独立的作用域
      return {
        // 标记该组件是否被选中
        swi: false,
        // 标记单个组件的总价格
        totals: 0
      }
    },
    // 计算属性
    computed: {
      // 用来计算当前组件图片应该用选中还是没有选中
      choose () {
        // 3. 子组件触发父组件中计算总价的方法
        this.$emit('calc')

        return this.swi ? 'choose2.png' : 'choose.png'
      },
      // 用来计算组件总价用的
      total () {
        this.totals = this.item.number * this.item.price
        // 3. 子组件触发父组件中计算总价的方法
        this.$emit('calc')

        return '￥' + this.totals.toFixed(2) + '元'
      }

    }
  })

  app.mount('#app')
</script>

</html>
